import 'elix/define/Dialog.js'
import docshowHtml from './docshow.html'
const $click = (element, handler) => {
    element.addEventListener('click', handler)
    element.addEventListener('touchend', handler)
  }
export class docshow extends HTMLElement{
    constructor(svgShow){
        super()
        const template = document.createElement('template')
        template.innerHTML = docshowHtml
        this.svgShow = svgShow
        this.svgShow.$svgShow.append(template.content.cloneNode(true))
        this.$docDialog = this.svgShow.$svgShow.querySelector("#doc_box")
        this.$container = this.svgShow.$svgShow.querySelector("#container1")
        this.$cb = this.svgShow.$svgShow.querySelector("#cb")
        this.$openkg = this.svgShow.$svgShow.querySelector("#openkg")
        this.init()
    }

    open(docData){
        this.svgShow.$svgShow.querySelector("#name").textContent = docData[0].name
        this.svgShow.$svgShow.querySelector("#jiange").textContent = docData[0].jiange
        this.svgShow.$svgShow.querySelector("#device").textContent = docData[0].device
        this.svgShow.$svgShow.querySelector("#yuming").textContent = docData[0].yuming
        this.svgShow.$svgShow.querySelector("#state").textContent = docData[0].state
        this.svgShow.$svgShow.querySelector("#index").textContent = docData[0].index
        if(docData[0].openkg){
            this.$cb.style.display = ""
            this.$openkg.style.display = ""
            this.$openkg.textContent = docData[0].openkg
        }else{
            this.$cb.style.display = "none"
            this.$openkg.style.display = "none"
        }
        this.$docDialog.open()
    }

    init(){
        this.$close = this.svgShow.$svgShow.querySelector('.closeDoc')
        var that = this
        this.$cb.style.display = "none"
        this.$openkg.style.display = "none"
        $click(this.$close, function () {
            that.$docDialog.close()
        })
    }

}
customElements.define('doc-dialog', docshow)

